<template>
    <div class="mainContent">
        <div class="box_left">
            <div class="top">
                <Select  v-model="deviceType" v-if="!searchFlag" @on-change='searchSelectFn'  style="width:100%;margin-right:2%" placeholder="请选择硬件类型">
                    <Option v-for="item in typeList" :value="item.id" :key="item.id" >{{item.name}}</Option>
                </Select>
                <input type="password" autocomplete="new-password" style="display: none" />
            </div>
            <div class="top" style=" display: flex;justify-content: center;align-items: center;">
                <Button type="primary" @click="updateRow(0)">+  添加升级包</Button>
            </div>
            <div class="center">
                <div class="list" v-infinite-scroll="scrollLoadFn">
                    <div :class="['item',item.packageId == packageId ? 'active' : ''] " v-for="(item , index ) in list" :key='index' @click="getMachDetail(item)">
                        <!-- <div class="img"><img :src="item.icon" alt=""></div> -->
                        <span class="name">
                            {{item.typeName}}
                        </span>
                        <span class="name" style="width:40px;">
                            {{item.masterVer ? '主机' : '从机'}}
                        </span>
                        <span class="name">
                            <Tooltip  transfer :content="item.masterVer ? item.masterVer : item.slaveVer" placement="top-start"  max-width='200'>
                                <div class="p" style="width:100px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer;">
                                    {{item.masterVer ? item.masterVer : item.slaveVer}}
                                </div>
                            </Tooltip>
                        </span>
                        <span class="btn">
                            <i class="el-icon-document" style="color:#fff" @click.stop="details(index , list)" v-if="item.packageId == packageId"></i>
                            <i class="el-icon-document" style="color:#1891FF" @click.stop="details(index , list)" v-else></i>
                            <i class="el-icon-delete" style="color:red" @click.stop="remove(index , list , 1)"></i>
                        </span>
                    </div>
                    <div style="height:50px;" v-if="list.length>1"></div>
                    <div class="no_data" v-if='list.length == 0 ' >
                        <img src="../../assets/images/common/rotary_nodata.png" />
                    </div>
                </div>
            </div>
            <div class="bottom">
                {{list.length}} / {{totalCount}}
            </div>
        </div>
        <div class="box_right">
            <div class="search">
                <div class="left">
                    <div class="btnList">
                        <div :class="['item', state_device == 2 ? 'active' : ''] " @click="setTabsFn(2)">已升级</div>
                        <div :class="['item', state_device == 1 ? 'active' : '']" @click="setTabsFn(1)">升级中</div>
                        <div :class="['item', state_device == 0 ? 'active' : '']" @click="setTabsFn(0)">未升级</div>
                    </div>
                </div>
                <div class="right">
                    <Button type="primary" @click="updateRow(1)">+  添加硬件</Button>
                </div>
            </div>
            <div class="tableBox" style="padding-top:15px;">
                <div class="tableList">
                    <el-table :data="tableList" style="width: 100%" height="6.3rem" :stripe="true">
                        <template slot="empty">
                            <div class="no_lsit" style="width:80%;margin:auto;">
                                <img src="../../assets/images/common/rotary_nodata.png" style="width:100%; height: 100%;" />
                            </div>
                        </template>
                        <el-table-column align="center" prop="deviceSn" label="硬件SN" ></el-table-column>
                        <el-table-column align="center" prop="deviceId" label="硬件ID"></el-table-column>
                        <el-table-column align="center" prop="startTime" label="升级开始时间">
                            <template slot-scope="scope">
                                <p>
                                    {{scope.row.startTime ? scope.row.startTime : '—'}}
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="endTime" label="升级结束时间">
                            <template slot-scope="scope">
                                <p>
                                    {{scope.row.endTime ? scope.row.endTime : '—'}}
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="state" label="状态">
                            <template slot-scope="scope">
                                <span class="red" v-if="scope.row.state == 0">未升级</span>
                                <span class="green" v-if="scope.row.state == 1">升级中</span>
                                <span class="orange" v-if="scope.row.state == 2">已升级</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="finish" label="升级进度">
                            <template slot-scope="scope">
                                {{scope.row.finish}}/{{scope.row.total || 0}}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="duration" label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" style="color:red;"  @click="remove(scope.$index , tableList , 2)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="tableList.length>0">
                    <div class="float-right">
                        <Page v-if="totalCount_device" style="margin: 20px 0;text-align: center;" :current="current_device" :total="totalCount_device" :page-size="pageSize_device" show-elevator show-total @on-change="pageChange"></Page>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="addUpgradePackageModal" title="添加设备" width="500px" :mask-closable="false" class-name='addModal'>
            <div class="addMsg">
                <div class="list" style="width:90%;margin:0 auto;">
                    <div class="item">
                        <span class="tip">*</span>
                        <span class="span">硬件类型：</span>
                        <Select v-model="deviceTypeId" style="flex:1" remote filterable placeholder="请选择硬件类型">
                            <Option v-for="item in deviceTypeList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </div>
                    <div class="item" v-if="deviceTypeId != 8">
                        <span class="tip">*</span>
                        <span class="span">升级硬件：</span>
                        <RadioGroup v-model="radio">
                            <Radio label='1'>主机</Radio>
                            <Radio label='2'>从机</Radio>
                        </RadioGroup>
                    </div>
                    <div class="item">
                        <span class="tip">*</span>
                        <span class="span">版本号：</span>
                        <Input v-model="versionNumber" placeholder="请输入版本号"  show-word-limit :maxlength="limitlength" style="flex:1" clearable />
                    </div>
                    <div class="item" style="align-items:flex-start;">
                        <span class="tip">*</span>
                        <span class="span">安装包：</span>
                        <div class="u_cord">
                            <span v-if="fileFlag">点击安装包</span>
                            <img src="../../assets/images/hdc/upgrade/package.png" style="width:64px;height:64px;" v-else />
                            <input  ref="upload_file" @change="getFileChange" type="file"   accept=".bin" style="position: absolute;left:0;top:0;height:200px;opacity: 0; width:100%;" />
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" style="padding:7px 25px;border-radius: 15px;background:rgba(46, 104, 253, 0.16);border:1px solid rgba(46, 104, 253, 0.16);" type="info" size="mini"><span style="color:#1891FF;">取消</span> </el-button>
                <el-button @click="submitAll" type="primary"  style="padding:7px 25px;border-radius: 15px;background:#1891FF;border:1px solid #1891FF;" size="mini"  v-preventReClick="1500"><span style="color:#fff;" >确定</span></el-button>
            </div>
        </Modal>

        <Modal v-model="deleteMachModal" title="删除" width="360px;" :mask-closable="false" class-name='detailsModal'>
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" style="padding:7px 25px;border-radius: 15px;background:rgba(46, 104, 253, 0.16);border:1px solid rgba(46, 104, 253, 0.16);" type="info" size="mini"><span style="color:#1891FF;">取消</span> </el-button>
                <el-button @click="detele" type="primary"  style="padding:7px 25px;border-radius: 15px;background:#1891FF;border:1px solid #1891FF;" size="mini"  v-preventReClick="1500"><span style="color:#fff;">确定</span></el-button>
            </div>
        </Modal>

        <Modal v-model="detailsMachModal" title="升级包详情" width="500px;" :footer-hide='true' :mask-closable="false" class-name='addModal'>
            <div class="addMsg">
                <div class="list" style="width:90%;margin:0 auto;">
                    <div class="item">
                        <span class="span" >硬件类型：</span>
                        <span class="span" v-if="detailsObj.deviceType == 1">机械云管家</span>
                        <span class="span" v-if="detailsObj.deviceType == 8">考勤设备</span>
                        <span class="span" v-if="detailsObj.deviceType == 11">OBD硬件</span>
                    </div>
                    <div class="item">
                        <span class="span">升级硬件：</span>
                        <span class="span" v-if="detailsObj.masterVer">主机</span>
                        <span class="span" v-if="detailsObj.slaveVer">从机</span>
                    </div>
                    <div class="item">
                        <span class="span">版本号：</span>
                        <span class="span" >{{detailsObj.masterVer}}</span>
                    </div>
                    <div class="item" style="align-items:flex-start;">
                        <span class="span">安装包：</span>
                        <img src="../../assets/images/hdc/upgrade/package.png" style="width:64px;height:64px;" />
                    </div>
                </div>
            </div>
        </Modal>

        <Modal v-model="addMachModal" title="添加硬件" width="660px;" :mask-closable="false" class-name="addModal">
            <div class="search">
                <div class="list" style="margin-right:20px">
                    <span>关键字搜索:</span>
                    <Input v-model="sn"  search  placeholder="请输入硬件SN" style="width:200px" @on-search='searchFn' clearable />
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
                <div class="list">
                    <span>硬件类型:</span>
                    <Select v-model="type" style="width:200px" placeholder="请选择硬件类型" @on-change='searchTypeSelectFn'>
                        <Option v-for="item in typeList" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                    <input type="password" autocomplete="new-password" style="display: none" />
                </div>
            </div>
            <div class="tableBox">
                <div class="tableList" style="width:96%;margin:0 auto;" >
                    <el-table :data="hardwareAllList" style="width: 100%" :stripe="true"  row-key="id" ref="table"  @select="listSelectOne" @select-all="listSelectALL">
                        <template slot="empty">
                            <div class="no_lsit" style="width:90%;margin:auto;">
                                <img src="../../assets/images/common/rotary_nodata.png" style="width:100%; height: 100%;" />
                            </div>
                        </template>
                        <el-table-column type="selection" :selectable="checkSelectable" width="55"></el-table-column>
                        <el-table-column  prop="sn" label="硬件SN" ></el-table-column>
                        <el-table-column  prop="code" label="硬件编码" ></el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="hardwareAllList.length>0">
                    <div class="float-right">
                        <Page v-if="totalCount_hardware" style="margin: 20px 0;text-align: center;" :current="current_hardware" :total="totalCount_hardware"  show-elevator show-total @on-change="pageChange_hardware"></Page>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(3)" style="padding:7px 25px;border-radius: 15px;background:rgba(46, 104, 253, 0.16);border:1px solid rgba(46, 104, 253, 0.16);" type="info" size="mini"><span style="color:#1891FF;">取消</span> </el-button>
                <el-button type="primary"  style="padding:7px 25px;border-radius: 15px;background:#1891FF;border:1px solid #1891FF;" size="mini" @click="submit"  v-preventReClick="1500"><span style="color:#fff;">确定</span></el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {getInnerUpgradePackageAdd,getInnerUpgradePackageList,getInnerUpgradePackageDel,getInnerUpgradeDeviceList,getAllDeviceList,getInnerUpgradeDeviceAdd,getInnerUpgradeDeviceDel} from '@/api/api.js'
export default {
    name: '',
    data () {
        return {
            list: [],
            typeList: [
                {
                    id:1,
                    name:"机械云管家"
                },
                {
                    id:8,
                    name:"考勤设备"
                },
                {
                    id:11,
                    name:"OBD硬件"
                }
            ],
            tableList:[],
            deviceTypeList:[
                {
                    id:1,
                    name:"机械云管家"
                },
                {
                    id:8,
                    name:"考勤设备"
                },
                {
                    id:11,
                    name:"OBD硬件"
                }
            ],
            keyword: '',
            machId: '',
            deviceType:-1,
            searchFlag:false,
            addUpgradePackageModal: false,
            addMachModal: false,
            deleteMachModal: false,
            detailsMachModal: false,
            fileFlag: true,
            limitlength:36,
            pageNum: 0,
            totalCount: 0,
            pages:1,
            pageSize: 20,
            radio:"1",
            deviceTypeId:"1",
            versionNumber:"",
            packageId:'',
            detailsObj:{},
            keyword_device:"",
            state_device:2,
            pageSize_device:9,
            pageNum_device:1,
            totalCount_device:0,
            current_device:1,

            hardwareAllList:[],
            isHardwareList: [],
            hardwareList: [],
            sn:"",
            type:1,
            pageNum_hardware:1,
            totalCount_hardware:0,
            current_hardware:1,
            upgradeId:"",
            deleteType:"",
        }
    },
    methods: {
        getMachDetail(item){
            this.packageId = item.packageId;
            this.detailsObj = item;
            this.pageSize_device = 9;
            this.pageNum_device = 1;
            this.isHardwareList = [];
            this.getList();
        },
        scrollLoadFn(){
            if(this.pageNum < this.pages){
                this.pageNum += 1;
                this.getAllList();
            }
        },
        // 升级包搜索
        searchSelectFn(index){
            this.deviceType = index;
            this.getAllList();
        },
        // 升级包搜索
        searchTypeSelectFn(index){
            this.type = index;
            this.getAllHardwareFn();
        },
        updateRow(type){
            if(type == 0){
                this.addUpgradePackageModal = true;
                this.radio = "1";
                this.deviceTypeId = "1";
                this.versionNumber = "";
                this.imageUrl = "";
                this.fileFlag = true;
            }else{
                this.addMachModal = true;
                this.sn = '';
                this.type = 1;
                this.getAllHardwareFn();
            }

        },
        // 提交升级包
        submitAll(){
            let formdata = new FormData();
            let config = {
                headers: { "Content-Type": "multipart/form-data" }
            };
            let fileObj = this.$refs.upload_file.files[0];
            if(!this.versionNumber){
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请输入上传升级包的版本号"
                });
                return;
            }
            let reg = /^\d(\.\d+){1,2}$/;
            if(!reg.test(this.versionNumber)){
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "版本号验证失败"
                });
                return;
            }
            if(!fileObj){
                this.$Modal.warning({
                    title: "提示",
                    content: "请上传升级包.bin的文件"
                });
                return;
            }
            if(fileObj.size / (1024*1024) > 1){
                this.$Message.error("升级包上传大小不能超过 1MB!");
                return;
            }
            formdata.append("file", fileObj, fileObj.name);
            formdata.append("deviceType", this.deviceTypeId);
            if(this.radio == 1 || this.deviceTypeId == 8){
                formdata.append("masterVer", this.versionNumber);
            }else{
                formdata.append("slaveVer", this.versionNumber);
            }
            getInnerUpgradePackageAdd(formdata, config)
                .then(res => {
                    if (res.code == 200) {
                        console.log(res)
                        this.addUpgradePackageModal = false;
                        this.getAllList();
                        this.$Message.success("操作成功");
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getFileChange(e) {
            let fileObj = this.$refs.upload_file.files[0];
            if(fileObj){
                this.fileFlag = false;
            }
        },
        // 获取升级包列表
        getAllList(){
            this.packageId = '';
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                deviceType: this.deviceType == -1 ? '' : this.deviceType,
            };
            getInnerUpgradePackageList(params).then(res =>{
                if(res.code == 200){
                    if( res.data.list.length > 0 ){
                        this.list = res.data.list;
                        this.list.forEach(v => {
                            v.typeName = '';
                            this.deviceTypeList.forEach(item => {
                                if(item.id == v.deviceType){
                                    v.typeName = item.name
                                }
                            })
                        })
                        this.pages = res.data.pages;
                        this.totalCount = res.data.total;
                        if(!this.packageId){
                            this.packageId = this.list[0].packageId;
                        }
                        this.getList();
                    }else{
                        this.list = [];
                        this.pages = 0;
                        this.totalCount = 0;
                        this.tableList = [];
                        this.totalCount_device = 0;
                        this.isHardwareList = [];
                    }
                }else{
                    this.$Message.warning(res.msg);
                }
            })
                .catch(error => {
                    console.log(error)
                })
        },
        // 获取升级包详情
        details(index, rows) {
            this.detailsMachModal = true;
            this.detailsObj = rows[index];
        },
        remove(index, rows, type) {
            if(type == 1){
                this.deleteType = 1;
                this.deleteMachModal = true;
            }else{
                this.deleteType = 2;
                this.deleteMachModal = true;
                this.upgradeId = rows[index].upgradeId;
            }
        },
        // 删除升级包
        detele() {
            if(this.deleteType == 1){
                getInnerUpgradePackageDel(this.packageId)
                    .then(res => {
                        if (res.code == 200) {
                            this.deleteMachModal = false;
                            this.$Message.success("操作成功");
                            this.getAllList();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }else{
                getInnerUpgradeDeviceDel(this.upgradeId)
                    .then(res => {
                        if (res.code == 200) {
                            this.deleteMachModal = false;
                            this.$Message.success("操作成功");
                            this.getList();
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }
        },
        searchFn(){
            this.pageNum_hardware = 1;
            this.getAllHardwareFn();
        },
        // 获取添加硬件列表
        getList(){
            this.tableList = [];
            let params = {
                pageNum: this.pageNum_device,
                pageSize: this.pageSize_device,
                packageId: this.packageId,
                keyword: this.keyword_device,
                state: this.state_device,
            };
            getInnerUpgradeDeviceList(params).then((res) => {
                if(res.code == 200){
                    this.tableList = res.data.list;
                    this.totalCount_device = res.data.total;
                }else{
                    this.$Message.warning(res.msg);
                }

            }).catch((error) => {
                console.log(error)
            });
        },
        // 添加硬件
        submit(){
            let hardwareList = [];
            for (let i = 0; i < this.hardwareList.length; i++) {
                const e = this.hardwareList[i];
                hardwareList.push(e.id);
            }
            let params = {
                packageId: this.packageId,
                deviceIdList: hardwareList,
            };
            getInnerUpgradeDeviceAdd(params).then((res) => {
                if(res.code == 200){
                    this.$Message.success('操作成功');
                    this.addMachModal = false;
                    this.getList();
                }
            }).catch((error) => {
                console.log(error);
            });
        },
        pageChange(index){
            this.pageNum_device = index;
            this.getList();
        },
        pageChange_hardware(index){
            this.pageNum_hardware = index;
            this.getAllHardwareFn();
        },
        //禁止选中的条件
        checkSelectable(row) {
            return this.isHardwareList.indexOf(row.id) == -1 // 0 存在
        },
        //多选
        listSelectOne(selection, row) {
            this.hardwareList = selection;
        },
        //全选
        listSelectALL(selection, row) {
            this.hardwareList = selection;
        },
        // 获取添加硬件列表
        getHardwareList(){
            this.isHardwareList = [];
            let params = {
                packageId: this.packageId
            };
            getInnerUpgradeDeviceList(params).then((res) => {
                if(res.code == 200){
                    let list = res.data.list;
                    for (let i = 0; i < list.length; i++) {
                        const e = list[i];
                        this.isHardwareList.push(e.deviceId);
                    }
                    for (let i = 0; i < this.hardwareAllList.length; i++) {
                        const e = this.hardwareAllList[i];
                        for (let j = 0; j < this.isHardwareList.length; j++) {
                            const v = this.isHardwareList[j];
                            if(e.id == v){
                                this.$nextTick( ()=> {
                                    this.$refs.table.toggleRowSelection(e, true);
                                })
                            }
                        }
                    }
                }else{
                    this.$Message.warning(res.msg)
                }
            }).catch((error) => {
                console.log(error)
            });
        },
        // 搜索全部设备sn
        getAllHardwareFn(value ){
            let params = {
                pageNum:this.pageNum_hardware,
                pageSize:10,
                type:this.type,
                sn:this.sn,
            }
            getAllDeviceList(params).then(res=>{
                if(res.code == 200) {
                    this.hardwareAllList = res.data.list;
                    this.totalCount_hardware = res.data.total;
                    this.getHardwareList();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        // 切换列表
        setTabsFn(type){
            this.pageNum_device = 1;
            this.current_device = 1;
            this.state_device = type;
            this.getList();
        },
        cancel(type){
            if(type == 1){
                this.addUpgradePackageModal = false;
            }else if (type == 2){
                this.deleteMachModal = false;
            }else if (type == 3){
                this.addMachModal = false;
            }

        },
    },
    mounted(){
    },
}
</script>
<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/mach.less";
@import "./../../assets/style/modal.less";
</style>

<style scoped lang='scss'>

@function pxToRem($val) {
    @return $val/100 + rem;
}
/deep/.mainContent{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    display: flex;
    .box_left{
        width: 375px;
        height: 100%;
        margin-right: 10px;
        padding: 15px 0;
        box-sizing: border-box;
        background-color: #ffffff;
        .top{
            width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            margin-bottom: 10px;
            .ivu-input-wrapper{
                border-radius: 2px;
                box-sizing: border-box;
            }
            .ivu-input,
            .ivu-input-search {
                border: none;
                border-radius: 0;
            }
        }
        .center{
            margin-top: 10px;
            width: 100%;
            overflow-y: auto;
            &::-webkit-scrollbar {
                width: 6px;
            }
            /*滚动槽*/
            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                border-radius: 10px;
            }
            /* 滚动条滑块 */
            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background: rgba(0, 0, 0, 0.1);
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            }
            &::-webkit-scrollbar-thumb:window-inactive {
                background: rgba(255, 0, 0, 0.4);
            }
            .list{
                .no_data {
                    width: 100%;
                    height: pxToRem(500);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    img{
                        display: block;
                        width: 100%;
                        height: pxToRem(250);
                        margin: 0 auto;
                    }
                }
                .item{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 10px 50px 10px 30px;
                    box-sizing: border-box;
                    cursor: pointer;
                    &.active{
                        background-color: var(--themeColor)  !important;
                        color: #fff;
                    }
                    &:nth-of-type(2n){
                        background-color: #F3F6FD;
                    }
                    .img{
                        width: 37px;
                        height: 34px;
                        img{
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                        margin-right: 20px;
                    }
                    .name{
                        width: 60px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                        margin-right: 20px;
                    }
                    .code{
                        width: 150px;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                    .btn{
                        margin-left: 10px;
                        width: 35px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        color: #F0F9FE;
                    }
                }
            }
        }
        .bottom{
            width: 100%;
            height: 32px;
            line-height: 32px;
            text-align: center;
            color: #555454;
            box-sizing: border-box;
            background-color:#E1EAFA;
            font-size: 12px;
        }
    }
    .box_right{
        flex: 1;
        height: 100%;
        .el-table__empty-text{
            width: 100% !important;
        }
        .search{
            width: 100%;
            padding: pxToRem(20) pxToRem(25);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            .left{
                .btnList{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    height: pxToRem(42);
                    background: #fff;
                    border-radius: 3px ;
                    border: 1px solid var(--themeColor);
                    border-radius: pxToRem(21);
                    overflow: hidden;
                    .item{
                        width: pxToRem(80);
                        height: pxToRem(42);
                        line-height: pxToRem(42);
                        text-align: center;
                        color: var(--themeColor);
                        border-right: 1px solid var(--themeColor);
                        cursor: pointer;
                        font-size: pxToRem(14);
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        &.active{
                            color: #fff;
                            background-color: var(--themeColor);
                        }
                        &:last-of-type{
                            border-right: none;
                        }
                    }
                }
            }
            .right{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .right_box{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    width: pxToRem(450);
                    position: relative;
                    .arrow_left,
                    .arrow_right{
                        width: pxToRem(30);
                        height: pxToRem(42);
                        text-align: center;
                        line-height:  pxToRem(42);
                        font-size: pxToRem(24);
                        cursor: pointer;
                    }
                }
                .ivu-input-wrapper{
                    border-radius: 3px;
                    box-sizing: border-box;
                }
                .ivu-input,
                .ivu-input-search {
                    border: none;
                    border-radius: 0;
                }
                .ivu-icon{
                    color: var(--themeColor);
                }

            }
        }
        .tableBox{
            width:100%;
            padding: 0 pxToRem(25);
            margin:0 auto;
            background-color: #fff;
            box-sizing: border-box;
            canvas{
                display: none !important;
            }
            .tableList{
                width: 100%;
                margin: auto;
                .el-table{
                    color: #181818;
                    font-family: MicrosoftYaHei;
                    font-size: pxToRem(14);
                    td,
                    th.is-leaf{
                        border-bottom: none;
                    }
                    tr{
                        border: none;
                    }
                }
                .el-table__row{
                    background-color: #fff;
                    cursor: pointer;
                }
                .el-table--striped .el-table__body tr.el-table__row--striped td{
                    background-color: #F3F6FD ;
                    cursor: pointer;
                }
            }
        }
    }
}
/deep/ .addModal{
    .list{
        .item{
            position: relative;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 15px;
            .span{
                width: 80px;
            }
            .tip{
                position: absolute;
                left: -5px;
                top: -5px;
                color: red;
            }
            .u_cord {
                flex: 1;
                height: 200px;
                border: 1px solid #eee;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                position: relative;
                cursor: pointer;
            }
            .u_cord span {
                font-size: 16px;
            }
            .u_cord img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }
    .search{
        width:100%;
        padding: 0 pxToRem(25);
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .list{
            display: flex;
            justify-content: flex-start;
            align-items: center;

        }
    }
    .tableBox{
        width:100%;
        padding: pxToRem(20) pxToRem(25);
        margin:0 auto;
        background-color: #fff;
        box-sizing: border-box;
        canvas{
            display: none !important;
        }
        .tableList{
            width: 100%;
            margin: auto;
            .el-table{
                color: #181818;
                font-family: MicrosoftYaHei;
                font-size: pxToRem(14);
                td,
                th.is-leaf{
                    border-bottom: none;
                }
                tr{
                    border: none;
                }
            }
            .el-table__row{
                background-color: #fff;
                cursor: pointer;
            }
            .el-table--striped .el-table__body tr.el-table__row--striped td{
                background-color: #F3F6FD ;
                cursor: pointer;
            }
            .is-disabled{
                background-color: transparent !important;
            }
        }
    }
}
/deep/ .transfer{
    position: relative;
    width: 90%;
    margin: auto;
    .el-transfer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .transfer-footer{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 3px;
            .ivu-input{
                border-radius: 15px;
            }
        }
    }
}
.red{
    display:inline-block;
     background-color:rgba(255, 72, 72, 0.1);
    border-radius:2px;
    border:1px solid #FF4848;
    color:#FF4848;
    padding:2px 10px;
}
.green{
    display:inline-block;
    background-color: rgba(63, 207, 119, 0.1);
    border:1px solid #28D79C;
    color: #3FCF77;
    border-radius:2px;
    padding:2px 10px;
}
.orange{
    display:inline-block;
    background-color:rgba(255, 166, 77, 0.1);
    border:1px solid #FFA64D;
    color: #FFA64D;
    border-radius:2px;
    padding:2px 10px;
}
</style>
